<!DOCTYPE html>
<html lang="zh">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="./css/style.css" type="text/css" />
	<script type="text/javascript" charset="utf-8" src="jquery-1.9.1.js"></script>
	<script type="text/javascript" charset="utf-8">
		$(function()
		{
			var links = $("a.popup");
			links.click(function(event)
			{
				var width = $(this).attr('data-width');
				var height = $(this).attr('data-height');
				event.preventDefault();
				window.open($(this).attr('href'), '设备运行管理', 'width=' + width + ',height=' + height);
			});
		});
	</script>
	<title>HTML5和CSS3实例教程练习文件</title>
</head>
<body>
	<header id="page_header">
		<h1>header标签用来定义页面或区段（section）的头部。此处的header是整个网页的头部。</h1>
		<!-- 标签用来定义导航区域。下面是在网页首部定义的导航。 -->
		<nav>
			<ul>
				<li><a href="/hc">Home</a></li>
				<li><a href="archives">Archives</a></li>
				<li><a href="contributors">Contributors</a></li>
				<li><a href="contact">Contact</a> </li>
			</ul>
		</nav>
	</header>
	<!-- section用来给内容分类，不要滥用，比如，单篇文章就不需要用它，直接用article即可。article内也可以使用section来划分内容。 -->
	<section id="posts">
		<header>
			<h1>这是section的头部</h1>
			<a href="http://localhost/machine" class="popup" data-width="400" data-height="300">首页</a>
		</header>
		<article>
			<header>
				<h2>这是article的头部</h2>
			</header>
			<p>section用来定义页面的逻辑区域或内容组合，区段。section作为划分区段，里面不要有直接内容。</p>
			<p>HTML5还可以自定义数据属性，使用data-来作为前缀定义即可，这样是为了避免与将来可以会有的新属性产生冲突。</p>
			<p>meter用来描述指定范围内的数据。</p>
			<p>progress用于显示实时进度的控件，可能多数浏览器不支持。</p>
			<aside><p>&quot;这是文章内的标注。尽量不要让文字在标签之外，也不要直接出现在结构标签之中。不要用aside定义侧边栏，尽管可以这样做，它的用途是展示与文章相关的内容，比如术语表、注释等。应当使用表结构的section。&quot;</p></aside>
			<footer>这是article的尾部</footer>
		</article>
		<article>
			<header>
				<h2>下面是用meter或progress来展示进度的示例</h2>
			</header>
			<p>下面是meter的效果，它的设计初衷是显示当前相对固定的可度量值：</p>
			<meter value="2500" title="USD" id="pledge_goal" min="0" max="5000">$2500.00</meter>
			<p>下面是progress的效果,它用来显示进度，如果是与度量衡相关的应用meter显示：</p>
			<progress id="progressbar" max="100" value="50">50%</progress>
			<p>Help us reach our goal of $5000!</p>
		</article>
		<footer>这是section的尾部。</footer>
		<section>
			<article>
				<header><h2>CSS3的页面元素选择器</h2></header>
				<ul>
					<li>:nth-of-type:查找某一特定类型的所有n个元素，比如：p:nth-of-type(2n+1){color:red;}</li>
					<li>:first-child:查找某一类型的第一个元素</li>
					<li>:nth-child:向后查找一个指定的子元素</li>
					<li>:last-child:查找最后一个子元素</li>
					<li>:nth-last-child:向前查找一个指定的子元素</li>
					<li>:first-of-type:查找特定类型的第一个元素</li>
					<li>:last-of-type:查找特定类型的最后一个元素</li>
					<li>column系列：对列的支持</li>
					<li>:after:与content一起使用，在指定元素后追加指定内容。</li>
					<li>media:基于设备设置应用样式，比如：media="only all and (max-width:480),注意，and后面需要有空格</li>
				</ul>
				<p>下面用页面元素选择器来渲染一个表格：</p>
				<table>
					<tr>
						<th>Item</th><th>Price</th><th>Quantity</th><th>Total</th>
					</tr>
					<tr>
						<td>Coffee mug</td><td>$10.00</td><td>5</td><td>$50</td>
					</tr>
					<tr>
						<td>Polo shirt</td><td>$20.00</td><td>5</td><td>$100</td>
					</tr>
					<tr>
						<td>Red stapler</td><td>$9.00</td><td>4</td><td>$36</td>
					</tr>
					<tr>
						<td colspan="3">Subtotal</td><td>$186.00</td>
					</tr>
					<tr>
						<td colspan="3">Shipping</td><td>$12</td>
					</tr>
					<tr>
						<td colspan="3">Total Due</td><td>$198</td>
					</tr>
				</table>

			</article>
		</section>
	</section>
	<article><p>article用来定义一篇完整的内容。</p></article>
	<section id="sidebar">
		<header>这是另一个区段</header>
		<nav>这是在另一个区段中定义的导航。</nav>
	</section>
	<footer id="page_footer">
		<!-- footer标签用来定义页面或区段的尾部。此处是整个网页的尾部。因为允许使用多个header和footer，所以，最好给特别的部分加上id属性用于区分。 -->
		<p>&copy 2014 Fordcode</p>
		<!-- 这是页面尾部的导航 -->
		<nav>
			<ul>
				<li><a href="http://localhost/machine/">设备运行管理</a></li>
				<li><a href="/Study/html5">HTML5权威指南</a></li>
				<li><a href="/m/test.html">移动Web测试页</a></li>
				<li><a href="http://localhost/php">PHP</a></li>
			</ul>
		</nav>
	</footer>

</body>
</html>